import React, { Component } from 'react';
import { inject, observer } from 'mobx-react'

@inject('data')
@observer
class AppleBtn extends Component {
    render() {
      /**
       * isPicking 采摘状态
       * pickApple 采摘苹果事件
       */
      const { isPicking, pickApple } = this.props.data
      return (
        <div className="btn-div">
            {/* 为按钮添加点击事件，点击后修改采摘状态，根据采摘状态显示不同的内容和样式 */}
            {/* 在采摘状态时禁用按钮点击，避免按钮被重复点击 */}
            <button 
              className={ isPicking ? 'disabled' : '' }
              onClick={pickApple}
              disabled={ isPicking }>
              { isPicking ? '正在采摘...' : '摘苹果'}
            </button>
        </div>
      )
    }
}
  
export default AppleBtn;